<template>
    <div class="alert" v-if="visible">
        <div class="alert-body">
            <img class="body-bg" src="http://img.douluotianxia.com/img/alert.png" alt="背景">
            <van-icon name="close" class="close-icon" @click="$emit('show')"/>
            <div class="title div-z">诚邀加盟</div>
            <div class="alert-content div-z">
                <div class="content-logo">
                    <img :src="addIcon" class="logo"/>
                </div>
                <div class="tips">
                    很遗憾，本校暂未开启校园超市服务期待您的加盟
                </div>
                <div class="tel">
                    加盟热线：027-8555-8520
                </div>
            </div>
            <div class="alert-btn div-z" @click="handleTel">联系商家</div>
        </div>
    </div>
</template>
<script>
const addIcon = require("@static/images/add.png");
export default {
    props: {
        visible: false
    },
    data() {
        return {
            addIcon
        }
    },
    methods: {
        handleTel() {
            wx.makePhoneCall({
                phoneNumber: '027-8555-8520',
            })
        }
    }
}
</script>
<style>
.alert {
    height: 100%;
    background: rgba(0,0,0,0.57);
    position: relative;
}
.alert-body {
    width: 300px;
    height: 380px;
    box-shadow: 0 0 38px 0 rgba(165,165,165,0.18);
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.body-bg {
    width: 300px;
    height: 380px;
    position: absolute;
}
.alert-content {
    width: 254px;
    height: 184px;
    border-radius: 4px;
    background: #FFFFFF;
    box-shadow: 0 0 38px 0 rgba(165,165,165,0.18);
    margin: 40px auto 0px;
}
.alert-bnt {
    background-image: linear-gradient(-197deg, #7F74FC 0%, #55AEFD 100%);
    box-shadow: 0 6px 27px 0 rgba(32,36,161,0.27);
}
.close-icon {
    font-size: 30px;
    color: #fff;
    position: absolute;
    bottom: -50px;
    left: 50%;
    margin-left: -15px;
}
.title {
    margin-top: 47px;
    font-size: 30px;
    color: #FDFAF9;
    text-align: center;
}
.tips {
    font-size: 12px;
    color: #C1C4C9;
    line-height: 22px;
    padding: 70px 30px 0px;
    text-align: center;
}
.content-logo {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 9px 32px 0 rgba(113,103,247,0.20);
    text-align: center;
    position: absolute;
    top: -30px;
    left: 81px
}
.logo {
    width: 40px;
    height: 42px;
    margin: 25px auto 0px;
}
.tel {
    font-size: 18px;
    color: #3BB8FD;
    text-align: center;
    margin-top: 15px;
}
.div-z {
    position: relative;
    z-index: 9;
}
.alert-btn {
    width: 254px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    font-size: 14px;
    margin: 20px auto;
    color: #fff;
    background-image: linear-gradient(-197deg, #7F74FC 0%, #55AEFD 100%);
    box-shadow: 0 6px 27px 0 rgba(32,36,161,0.27);
    text-align: center;
}
</style>